<template>
    <div>
        <!--  顶部表单 -->
        <el-form>
            <el-form-item>
                <div align="center">
                    <h1>租户信息管理</h1>
                </div>
            </el-form-item>
            <el-form :inline="true" :model="keyword" ref="searchForm" class="demo-form-inline" align="center">
                <el-form-item label="租户名称" prop="tenantName">
                    <el-input size="small" clearable v-model="keyword.tenantName" placeholder="租户名称"></el-input>
                </el-form-item>
                <el-form-item label="负责人姓名" prop="principalName">
                    <el-input size="small" clearable v-model="keyword.principalName" placeholder="负责人姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="search" icon="el-icon-search">查询</el-button>
                    <el-button type="primary" plain size="small" @click="resetSearchForm('searchForm')"
                        icon="el-icon-refresh">重置
                    </el-button>
                </el-form-item>
                <el-form-item class="custom-space">
                    <el-button type="success" size="small" @click="openAddDialog" icon="el-icon-plus">添加信息</el-button>
                    <el-button type="danger" size="small" @click="deleteBatch" icon="el-icon-delete">批量删除</el-button>
                    <el-button type="info" size="small" @click="dialogExcelVisible = true" icon="el-icon-upload2">导入应用
                    </el-button>
                    <el-button type="warning" size="small" @click="downloadExcel" icon="el-icon-download">导出表格
                    </el-button>
                </el-form-item>
            </el-form>
        </el-form>

        <!-- 上传excel的对话框 -->
        <el-dialog title="上传应用Excel" :visible.sync="dialogExcelVisible" width="40%">
            <el-upload class="upload-demo" drag action="http://localhost:9100/message/upload/excel" accept=".xlsx,.xls"
                :on-success="uploadExcelSuccess" :on-error="uploadExcelError" multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传.xlsx,.xls文件,且不超过500kb</div>
            </el-upload>
        </el-dialog>

        <!--  中间框  -->
        <el-table :data="messageList" height="300" @selection-change="handleSelectionChange" border style="width: 100%">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column prop="tenantName" label="租户名称" align="center">
            </el-table-column>
            <el-table-column prop="code" label="社会信用代码" align="center">
            </el-table-column>
            <el-table-column prop="principalName" label="负责人姓名" align="center">
            </el-table-column>
            <el-table-column prop="phone" label="电话" align="center" width="180">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-folder-opened"
                        @click="openManageDialog(scope.row)">详情
                    </el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 页码框 -->
        <hr>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[5, 10, 20]" :page-size="100" align="center" layout="total,sizes,prev,pager,next,jumper"
            :total="total">
        </el-pagination>

        <!-- 查看弹窗 -->
        <el-dialog title="查看详情" :visible.sync="dialogmanage" width="50%">
            <el-table :data="InformationVOList" border style="width: 90%" ref="informationVORulesForm"
                label-width="180px">
                <el-table-column prop="id" label="编号" align="center">
                </el-table-column>
                <el-table-column prop="name" label="人员姓名" align="center">
                </el-table-column>
                <el-table-column prop="phone" label="电话" align="center">
                </el-table-column>
                <el-table-column prop="personalType" label="人员类型" align="center">
                </el-table-column>
                <el-table-column prop="tenantName" label="租户名称" align="center">
                </el-table-column>
                <el-table-column prop="floorId" label="楼号" align="center">
                </el-table-column>
                <el-table-column prop="roomName" label="房间名称" align="center">
                </el-table-column>
            </el-table>
        </el-dialog>

        <!-- 添加对话框 -->
        <el-dialog title="添加课程" :visible.sync="dialogAdd" width="30%">
            <el-form ref="informationRulesForm" :model="information" label-width="80px">
                <el-form-item label="租户名称" prop="tenantName">
                    <el-input v-model="information.tenantName" autocomplete="off" style="width:300px"></el-input>
                </el-form-item>
                <el-form-item label="社会信用代码" prop="code">
                    <el-input v-model="information.code" autocomplete="off" style="width:300px"></el-input>
                </el-form-item>
                <el-form-item label="负责人姓名" prop="principalName">
                    <el-input v-model="information.principalName" autocomplete="off" style="width:300px"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input v-model="information.phone" autocomplete="off" style="width:300px"></el-input>
                </el-form-item>
                <el-form-item label="创建时间" prop="createTime">
                    <div class="block">
                        <span class="demonstration"></span>
                        <el-date-picker v-model="information.createTime" autocomplete="off" style="width:300px"
                            type="datetime" placeholder="选择日期时间">
                        </el-date-picker>
                    </div>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addonSubmit('informationRulesForm')">确认保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
// 导入自己封装的api请求方法
import { getList, deleteById, getList1, addInformation, delBatch } from '@/api/message'

export default {
    name: 'Message',
    data() {
        return {
            // 遮罩层
            loading: true,
            // 人员列表
            messageList: [],
            // 当前页码
            currentPage: 1,
            pageNum: 1,
            pageSize: 5,
            total: 0,
            ids: [],
            keyword: {
                tenantName: null,
                principalName: null
            },
            // 管理当前查看窗口
            dialogmanage: false,
            // 学生列表
            InformationVOList: [],
            //新增窗口开关
            dialogAdd: false,
            dialogExcelVisible: false,
            information: {
                id: '',
                tenantName: '',
                code: '',
                principalName: '',
                phone: '',
                createTime: '',
            },

            informationVO: {
                id: '',
                name: '',
                phone: '',
                personalType: '',
                tenantName: '',
                floorId: '',
                roomName: '',

            },

        }
    },
    methods: {
        clearForm() {

        },
        fetchData() {
            // 组装查询参数
            let params = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                tenantName: this.keyword.tenantName,
                principalName: this.keyword.principalName
            }
            // getList是api/type.js中自己
            getList(params).then(res => {
                // let pageInfo = res.data
                // console.log("pageInfo",pageInfo)
                this.loading = false
                console.log(res.data)
                this.messageList = res.data.list
                this.total = res.data.total
            })
        },
        // 多选框选中数据
        handleSelectionChange(selectionRowArr) {
            this.ids = []
            // console.log(selectionRowArr)
            for (let i = 0; i < selectionRowArr.length; i++) {
                this.ids.push(selectionRowArr[i].id)
            }
            // console.log("ids",this.ids)
        },
        //页面大小改变时触发
        handleSizeChange(val) {
            this.pageSize = val
            this.fetchData()
            this.fetchData1()

        },
        //当前页码改变时触发
        handleCurrentChange(val) {
            this.pageNum = val
            this.fetchData()
            this.fetchData1()

        },
        // 模糊搜索
        search() {
            this.fetchData()
        },
        // 重置表单
        resetSearchForm(formName) {
            this.$refs[formName].resetFields()
            this.fetchData()
        },
        // 根据id删除
        handleDelete(row) {
            //console.log(row.id)
            this.$confirm('是否确认删除该条号号为' + '\'' + row.id + '\'' + '的数据项？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let params = {
                    id: row.id
                }
                deleteById(params).then(res => {
                    if (res.code == 20000) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                        this.fetchData()
                    }
                }).catch(() => {
                    this.$message({
                        type: 'error',
                        message: '当前选课人数不为0,删除失败!'
                    })
                })
            })
        },
        // 打开查看对话框
        openManageDialog(row) {
            this.dialogmanage = true;
            this.fetchData1(row);
            console.log("----------", row);

        },
        fetchData1(row) {
            console.log(row);

            let params = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                id: row.id
            }
            // getList1是api/type.js中自己
            getList1(params).then(res => {
                this.loading = false
                console.log(res.data)
                this.InformationVOList = res.data.list
                this.total = res.data.total
            })
        },
        // 打开添加对话框
        openAddDialog() {
            this.clearForm();
            this.dialogAdd = true
            console.log(this.$refs)
            this.title = '添加'

        },
        // 添加课程
        addonSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // 此处执行添加...
                    console.log(this.information)
                    addInformation(this.information).then(res => {
                        this.$message({
                            showClose: true,
                            type: 'success',
                            message: '添加成功!'
                        })
                        this.dialogAdd = false
                        this.fetchData()
                        this.$refs[formName].resetFields()
                    })
                        .catch(() => {
                            this.$message({
                                showClose: true,
                                type: 'error',
                                message: '课程名重复,添加失败'
                            })
                            this.dialogAdd = false
                        })
                }

            })

        },
        // 批量删除
        deleteBatch() {
            this.$confirm('是否确认删除单位编号为[' + this.ids + ']的数据项？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let idStr = this.ids.join(',')
                console.log('idStr', idStr)
                let params = {
                    ids: this.ids.join(',')
                }
                delBatch(params).then(res => {
                    if (res.code == 20000) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                        this.fetchData()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        // 上传excel
        uploadExcelSuccess() {
            this.$message({
                type: 'success',
                message: '上传成功'
            })
            this.dialogExcelVisible = false
            this.fetchData()
        },
        uploadExcelError(err) {
            this.$message({
                type: 'error',
                message: err
            })
        },
        //文件下载
        downloadExcel() {
            this.$confirm('确定要导出数据吗？', '信息', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                window.location.href = 'http://localhost:9100/message/download/excel'
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消导出数据'
                })
            })
        }
    },
    // 生命周期钩子函数(vue对象创建完,自动调用该方法)
    created() {
        this.fetchData()
    }
}
</script>


<style scoped lang="scss">
.custom-space {
    padding-left: 20px;
    /* 你可以根据需要调整这个值 */
}
</style>